• Displayed and Stored Values in DropdownBox Controls
• Dynamically Re-Populate Choices in a Dropdown Box
• Populate from data cache
• Populating Cascading Dropdowns from Data Cache
• Using a Dropdown Box Control to Populate a List with SQL Data

Dynamically Re-Populate Choices in a Dropdown Box

Description

You can create a dropdown box that allows users to enter new options to the dropdown list. These entries can be made using a pop-up window and then stored in a SQL database.

This guide shows how to create a dropdown box control that is populated using an SQL table from the Northwinds database. Some Javascript is then used to create an entry named 'Add new choice' in the dropdown box control's dropdown list. When the user clicks on the entry, a pop-up window opens that contains a textbox control and a submit button. The user enters data into the textbox control and then submits back to the SQL table which populates the dropdown control. This is done using an Ajax callback that calls the Xbasic function used to add the new data to the server and refresh the dropdown list. For a visual explanation also watch this video.

Populate a DropDown Box From a SQL Table

1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [DropdownBox] option to add a dropdown box to the component. Give the dropdown box the name and label 'product'.

   

2. In the properties list on the right scroll down to the 'DropDownBox' properties. Click the [...] button next to the 'Choices' property.

   

3. In the 'Define Choices' dialog select the 'Dynamic' radio button option in the 'Choices are' menu.

   

4. In the property settings that appear set the 'Data source type' to be 'AlphaDAO'.

   

5. Click the [...] button next to the 'AlphaDAO Connection string name' property. Create a connection to the Northwind database. Click OK to return to the Define Choices dialog.

   

6. Click the [...] button next to the 'AlphaDAO SQL SELECT statement' property.

   

7. In the 'SQL Select' dialog's 'Genie' tab click the 'Select' button next to the 'Table' textbox and select the 'Products' table.

   

8. Expand the 'Field to display' dropdown in the SQL Select dialog and select the 'ProductName' field. Click OK to close the dialog.

   

9. Back in the 'Define Choices' dialog click the [...] button next to the 'Additional choices (Pre)' property.

   

10. Add the following to the 'Specify Choices' definition and click OK and OK again to close the Define Choices dialog.

    Add new choice|__NewChoice__

    

11. Back on the UX Controls page, scroll down the 'product' drop-down box control's properties list to the 'Javascript' section. Click the [...] button next to the 'onChange' property.

    

12. In the 'Edit onChange Event' dialog select the 'Text mode' radio button option. Add the following code to the 'onChange' event's definition and click Save

    if( this.value == '__NewChoice__') {dialog.object}.runAction('showwindow');

    

13. Run the Component in Live Preview. When you click on the dropdown box button you should see a dropdown list containing all of the products listed in the 'ProductName' field.

    

Place the Dropdown Box Control in a Repeating Section.

1. Open the UX Controls page and highlight the 'product' dropdown box control in the controls tree. Expand the 'Containers' menu and click on the [Container] option.

   

2. The 'Container Type' list will open. Select the 'RepeatingSection' option and click the 'Insert Around' button.

   

3. Run the Component in Live Preview. By default there are five repeating sections. Click on one of the repeating sections and you should see the same list displayed as in the original 'product' dropdown box.

   

Layout a Pop-Up Window Container tthat will Open from the Dropdown List

1. On the UX Controls page highlight the closing repeating section tag, [RepeatingSection End: CONTAINER_2]. Open the 'Data Controls' menu and click on the [TextBox] option to add a textbox control to the component. Give the textbox control the name 'newProdName'.

   

2. Highlight the textbox control and the button. Open the 'Containers' menu and click on the [Frame] option to place a frame around the two controls. Give the frame the name 'Add Product'.

   

3. Highlight the frame control and everything in it. In the 'Containers' menu click on the [Container] option.

   

4. In the 'Container Type' list select the 'None' option.

   

5. Highlight the opening container tag. The tag should be [Container:CONTAINER_1]. If the id of the container is not 'CONTAINER_1' go to the properties list on the right, click the [...] button next to the 'Container ID' property in the 'Container Begin Properties' section, and change the container ID to be 'CONTAINER_1'.

   

Define the Javascript that will Open the Pop-Up Window

1. In the UX menu open the UX Properties page. Scroll down to the 'Javascript' section and click the [...] button next to the 'Javascript Actions' property.

   

2. In the 'Define Javascript Actions' dialog click the 'Add New Action' button. Give the new action the name 'showwindow'.

   

3. Click the 'Edit Action' button.

   

4. Select the 'Action Javascript' radio button and click the 'Add New Action' button.

   

5. Type 'pop' into the 'Filter list'. Select the 'Open a Pop-up Ajax Window/Overlay' action and click OK.

   

6. In the action's properties list click the dropdown next to the 'How is window contents set' property. Select the 'Contents of a Container' option.

   

7. Click the dropdown next to the 'Container id' property and select 'CONTAINER_1'.

   

8. Set the 'Window height' property to "1.5in".

   

9. Set the 'Window width' property to be "5in". Click OK to close the properties list and then click 'Save' and 'OK'.

   

10. Run the component in Live Preview. Click the dropdown box control again. There should be an 'Add new choice' option. Click on the 'Add new choice' option and the container, CONTAINER_1, that you defined should open.

    

Create the Xbasic Function that Adds New Entries to the List

The 'xb_addProduct' function, shown in this section, enters user defined data into a dropdown list. This function is called after a user enters some data into a textbox and then submits this data using an Ajax callback. A button's click event will cause the Ajax callback to fire. Both the button and the Ajax callback are defined in later sections.

1. Expand the 'Code' menu in the UX Builder's main menu. Click on 'Xbasic functions' to open the Xbasic Functions page.

   

2. Add the following code that defines a function called 'xb_addProduct'.

   function xb_addProduct as c (e as p)
   dim newProd as c
   newProd = e.dataSubmitted.newProdName
   dim sql as c
   sql = "insert into Products(ProductName)values(:ProductName)"
   dim args as sql::arguments
   args.add("ProductName",newProd)
   dim cn as sql::Connection
   cn.open("::Name::AADemo-Northwind")
   dim flag as l
   flag = cn.Execute(sql,args)
   dim js as c
   js = "{dialog.object}.refreshDropdownBoxChoices('product','','','"+newProd+"');"
   xb_addProduct = js
   end function

   

In the first line of code, the argument 'e' is passed into the function to serve as a pointer to the value that the user submitted. This value is assigned to a variable named 'newProd'. The textbox control named 'newProdName' is specified as being the source of the data that the user submitted.

dim newProd as c
newProd = e.dataSubmitted.newProdName

The next step defines an 'sql' variable. This variable is used to execute a statement that defines where the newly added data should go when it is inserted into the 'Products' table. In this example the data will be placed inside the 'ProductName' field, because this is the field that populates the 'product'' dropdown control.

dim sql as c
sql = "insert into Products(ProductName)values(:ProductName)"

The args.add() method adds an argument with the name 'ProductName', the field name, and then sets this argument equal to the 'newProd' variable, which is the value that the user submitted. The cn.open() method creates a connection string to the database that contains the table that you want to use, in this case the 'Products' table. In the event that the Northwind database you are using does not match the connection shown in this code, take the following steps:

• Inside the cn.open() method's parenthesis, erase the existing connection string and then re-type "::Name::" inside the parenthesis. The bubble help for the SQL::Connection.Open() method should appear.

  

• [SQLConnectionString as C[ should appear highlighted in black. With the mouse, right click on the black highlight. The 'AlphaDAO Connection Strings' genie will open. Select the named connection string that you want to connect to and click OK.

  

• The connection string should appear inside the method:

  

The 'cn.Execute() method executes the query, actually adding the argument to the specfied sql table. After the new user entry is added a javascript response is computed. This response is sent from the server back to the browser. The response calls the refreshDropdownBoxChoices() method. This method takes as its first argument the control to be refreshed, which in this case is the 'product' dropdown box control. The last argument sets the focus on the refreshed control to the new data that the user entered. This means that when the user submits the data to the server, their entry will then show up again in their client-side browser. The line 'xb_addProduct = js' is responsible for actually sending the Javascript back to the client to execute at the end of the Ajax callback.

Add an Ajax Callback

1. Open the UX Properties page and again click the [...] button next to the 'Javascript Actions' property.

   

2. Click the 'Add New Action' button. Give the new action the name 'ajaxCallback_addNewProduct'.

   

3. Highlight the new action and click the 'Edit Action' button.

   

4. In the 'Edit unbound Event' dialog select the 'Action Javascript' radio button and then click the 'Add New Action' button with the green plus next to it.

   

5. In the 'Action Javascript - Select an Action' dialog type 'ajax' in to the filter list textbox. Select the 'Ajax Callback' action and click OK.

   

6. The action's properties settings will appear. Keep the 'Callback type' property set to 'InternalXbasicFunction'.

   

7. Next to the 'Function name' property enter the following function.

   xb_addProduct

   

8. Click OK to close the action settings, OK again, and 'Save' to return to the 'Define Javascript Actions' dialog.

   

Add Buttons to the 'showwindow' Action

1. Highlight the 'showwindow' action that was defined earlier and click the 'Edit Action' button.

   

2. Highlight the 'Open a Pop-up Ajax Window/Overlay' action and click the 'Edit Action' button.

   

3. Scroll down to the 'Window Buttons' section and check the 'Has custom toolbar buttons' property.

   

4. Click the [...] button next to the 'Define buttons' property, also in the 'Window Buttons' section.

   

5. Click the 'Add' button. Name the new button 'AddProduct' and click OK.

   

6. The 'AddProduct' button's properties should appear on the right. Change the 'Label' property to be 'Add New Product'.

   

7. Click the dropdown next to the 'Action' property and select 'custom'.

   

8. Click the [...] button next to the 'Code' property.

   

9. Add the following code to the 'Edit Javascript Code' dialog. Click OK.

   {dialog.object}.runAction('ajaxCallback_addNewProduct');
   this.hide();

   

10. In the 'Window - Toolbar Button Builder' click the 'Add' button a second time. Give the new button the name 'Cancel'

    

11. In the properties list on the right, set the new 'Cancel' button's 'Action' property to be 'custom'.

    

12. Click the [...] button next to the 'Code' property.

    

13. Add the following code to the 'Edit Javascript Code' dialog.

    {dialog.object}.setValue('product','');
    this.hide();

    

1. Continuing from the section above, click the 'Add New Action' button.

   
   To get here first open the UX Properties page and again click the [...] button next to the 'Javascript Actions' property. Then highlight the 'showwindow' action and click the 'Edit Action' button.

2. Type 'inline' into the filter list textbox. Select the 'Inline-Javascript' action and click OK.

   

3. Add the following code to the 'In-line Javascript' definition. This code will ensure that the 'Add Product' container will open with a blank textbox whenever you click the 'Add new choice' option in the dropdown list. Click OK, OK, Save, and OK.

   {dialog.object}setValue('newprodname','');

   

4. Run the component in Live Preview. Click the dropdown and select 'Add new choice' from the dropdown list.

   

5. Type a new product name into the textbox and click the 'Add New Product' button.

   

6. The new entry should appear in the dropdown control and dropdown list.